//自定义音乐播放器标签

//当vue.js不支持当前版本定义方法缩写时 修改打开 File -> Settings -> Languages & Frameworks -> Javascript
//更改JavaScript版本为ECMAScript 6
function fun(path){
    var loadstr ='<audio width="100%" height="100%" ' +
        //src为bgm下的音频
        'controls="controls" autoplay="autoplay" src="../' +path+
        '"></audio>'

    layui.use(["layer"],function () {
        var  layer = layui.layer;
        layer.open({
            type: 1,
            title: "预览",
            content: loadstr
        })
    })
}

//方法级渲染
layui.use(
    [
        "laydate",
        "laypage",
        "layer",
        "table",
        "carousel",
        "upload",
        "element",
        "slider"
    ],
    function() {
        var laydate = layui.laydate, //日期
            laypage = layui.laypage, //分页
            layer = layui.layer, //弹层
            table = layui.table, //表格
            carousel = layui.carousel, //轮播
            upload = layui.upload, //上传
            element = layui.element, //元素操作
            slider = layui.slider, //滑块
            $ = layui.jquery;
        //向世界问个好

        table.render({
            elem: "#demo",
            height: 600,
            url: "http://localhost:7070/video/bgms/getAll", //数据接口
            title: "音乐列表",
            page: true, //开启分页
            toolbar: "default", //开启工具栏，此处显示默认图标，可以自定义模板，详见文档

            parseData: function(res) {
                //res 即为原始返回的数据
                return {
                    code: res.status, //解析接口状态
                    msg: res.message, //解析提示文本
                    count: res.total, //解析数据长度
                    data: res.item //解析数据列表
                };
            },
            cols: [
                [
                    //表头
                    { type: "checkbox", fixed: "left" },
                    {
                        field: "id",
                        title: "ID",
                        fixed: "left"
                    },
                    { field: "author",
                        title: "发布者" },
                    {
                        field: "musicname",
                        title: "歌曲名"
                    },
                    { field: "url",
                        title: "歌曲",
                        templet(dt){
                            var path = dt.url;
                            return "<button class='layui-btn layui-btn-normal layui-btn-xs vi'" +
                                "onclick='fun(\"" + path + "\")'>点击我播放</button>"

                        }

                    },

                    {
                        fixed: "right",
                        width: 165,
                        align: "center",
                        toolbar: "#barDemo"
                    }
                ]
            ]
        });
        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            //遍历data中的数据 拿到data里的id放到数组中
            var arr = new Array();
            for (let d in data) {
                arr[d] = data[d].id
            }
            switch(obj.event){
                case 'add':

                    layer.open({
                        type:2,
                        title:"添加音乐",
                        area:["80%","80%"],
                        content:'../templates/addBgm.html',
                    })
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择至少一行数据');
                    } else {
                        layer.confirm("确认删除吗",(index)=>{
                            layer.close(index);
                            //写请求去后台实现操作
                            $.ajax({
                                type: "post",
                                url: "http://localhost:7070/video/bgms/del",
                                dataType: "json",
                                traditional: true,//传数组要加
                                data: {
                                    "idlist": arr
                                },
                                success(res) {
                                    if (res.message == "success") {

                                        layer.msg(res.message);
                                    } else {
                                        layer.msg(res.message);
                                    }
                                }
                            });
                        });
                    }
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var d = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type:"post",
                        url:"http://localhost:7070/video/bgms/del",
                        data:{
                            "id":d.id ,
                        },
                        dataType:"json",
                        success(res){
                            //解析json数据，判断结果
                            if (res.message=="success"){

                                layer.msg(res.message);
                            }else {
                                layer.msg(res.message);
                            }

                        }
                    })
                });
            }
        });
        //实现文件上传
        upload.render({
            elem: '#upload1'
            ,url: 'http://localhost:7070/video/bgms/up'
            ,accept: 'audio' //音频
            ,field:"file" //对应到后端接收的文件名称
            ,done: function(res){
                //从后台获取到我们的文件名称
               // doucument.getElementById("audio_url")
                $("#audio_url").val(res.message);
                console.log(res.message)
            }
        });
    //实现表单的上传
        $("#sub").on('click', () => {
            $.ajax({
                type:"post",
                url:"http://localhost:7070/video/bgms/add",
                data:$("#form").serialize(), //对表单进行序列化
                dataType:"json",
                success(res){
                    layer.msg(res.message)
                }
            })
        })
    });